<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="/static/newcj/fonts/iconfont.css?v=2016070717">
    <script src="/static/newcj/js/jquery.min.js"></script>
    <script src="/static/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="/static/newcj/js/dist/flexible/flexible.debug.js"></script>
</head>
<body ontouchstart>
<div class='fui-page-group'>
<div class='fui-page chatDetail-page'>
    <div class="chat-header flex">
        <i class="icon icon-toleft t-48"></i>
        <span class="shop-titlte t-30"></span>
        <span class="shop-online t-26"></span>
        <span class="into-shop">进店</span>
    </div>
    <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
        <div class="chat-content">
            <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
            <p class="chat-time"><span class="time">2017-11-12</span></p>
        </div>
    </div>
    <div class="fix-send flex footer-bar">
        <i class="icon icon-emoji1 t-50"></i>
        <input class="send-input t-28" maxlength="200">
<!--        <input type="file" name="pic" id="file" style="display: none">-->
        <form id="form-file" enctype="multipart/form-data" method="post" action="{:url('/ChatApi/uploading')}">
            <input type="file" name="file" id="file" style="display: none">
        </form>
        <i class="icon icon-add image_up t-50" style="color: #888;"></i>
        <span class="send-btn">发送</span>
    </div>
</div>
</div>

<script>
    var API_URL = "http://tpblog.com/ChatApi/"
    var fromid = {$fromid};
    var toid = {$toid};
    var ws = new WebSocket("ws://127.0.0.1:8282");
    var from_avatar = '';
    var to_avatar = '';
    var from_name = '';
    var to_name = '';
    var online = 0;

    ws.onmessage = function (e){
        // 将json转为对象
        let message = eval('(' + e.data + ')');

        switch (message.type) {
            // 初始化绑定
            case "init":
                // 绑定id
                var bind = {
                    "type":"bind",
                    "fromid":fromid,
                };
                ws.send(JSON.stringify(bind));
                // 获取头像
                get_avatar(fromid, toid)
                // 获取名称
                get_name(fromid, toid)
                // 加载消息
                message_load();
                // 判断用户是否在线
                var online = {
                    "type":"online",
                    "toid":toid,
                    "fromid":fromid
                }
                ws.send(JSON.stringify(online));
                // 将所有未读修改为已读
                changeNoRead();
                return;
            // 接受消息
            case "text":
                if (toid == message.fromid){
                    $('.chat-content').append('<div class="chat-text section-left flex">\n' +
                        '            <span class="char-img" style="background-image: url('+to_avatar+')"></span>\n' +
                        '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+message.data+'</span>\n' +
                        '        </div>')
                    $(".chat-content").scrollTop(3000);
                }
                changeNoRead();
                return;
            // 接受图片消息
            case "say_img":
                $('.chat-content').append('<div class="chat-text section-left flex">\n' +
                    '            <span class="char-img" style="background-image: url('+to_avatar+')"></span>\n' +
                    '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src='+message.img_name+'></span>\n' +
                    '        </div>')
                $(".chat-content").scrollTop(3000);
                changeNoRead();

            // 保存消息记录
            case "save":
                save_message(message);
                if (message.isread==1){
                    online = 1;
                    $(".shop-online").text("在线");
                } else {
                    online = 0;
                    $(".shop-online").text("离线");
                }
                return;

            case "online":
                if (message.status==1){
                    $(".shop-online").text("在线");
                } else {
                    $(".shop-online").text("离线");
                }
        }
    }

    // 发送消息
    $(".send-btn").click(function (){
        var text = $(".send-input").val();
        var message_json = {
            'data':text,
            'type':'say',
            'fromid':fromid,
            'toid':toid,
        }

        $('.chat-content').append('<div class="chat-text section-right flex">\n' +
            '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+text+'</span>\n' +
            '            <span class="char-img" style="background-image: url('+from_avatar+')"></span>\n' +
            '           </div>')

        $(".chat-content").scrollTop(3000);

        ws.send(JSON.stringify(message_json));

        $(".send-input").val("");


    })

    // 保存聊天记录
    function save_message(message){
        $.post(
            API_URL+"save_message",
            message,
            function (){

            },'json'
        )
    }

    // 修改未读状态
    function changeNoRead(){
        $.post(
            API_URL+"changeNoRead",
            {"fromid":fromid, "toid":toid},
            function (){

            },'json'
        )
    }

    // 获取头像
    function get_avatar(fromid, toid){
        $.post(
            API_URL+"get_avatar",
            {"fromid":fromid, "toid":toid},
            function (e){
                from_avatar = e.from_avatar;
                to_avatar = e.to_avatar;
            },'json'
        )
    }

    // 获取名称
    function get_name(fromid, toid){
        $.post(
            API_URL+"get_name",
            {"fromid":fromid, "toid":toid},
            function (e){
                from_name = e.from_name;
                to_name = e.to_name;
                $(".shop-titlte").text("与"+to_name+"聊天中...");
            },'json'
        )
    }

    // 加载消息
    function message_load(){
        $.post(
            API_URL+"load",
            {"fromid":fromid, "toid":toid},
            function (e){
                console.log(e)
                for (const msg of e.data) {
                    if (fromid==msg.fromid && toid == msg.toid){
                        // 判断消息为文本还是图片
                        if (msg.type==1){
                            $('.chat-content').append('<div class="chat-text section-right flex">\n' +
                                '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+msg.content+'</span>\n' +
                                '            <span class="char-img" style="background-image: url('+from_avatar+')"></span>\n' +
                                '           </div>')
                        } else if (msg.type==2){
                            $('.chat-content').append('<div class="chat-text section-right flex">\n' +
                                '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src='+msg.content+'></span>\n' +
                                '            <span class="char-img" style="background-image: url('+from_avatar+')"></span>\n' +
                                '           </div>')
                        }
                    } else if (toid == msg.fromid && fromid == msg.toid){
                        if (msg.type==1){
                            $('.chat-content').append('<div class="chat-text section-left flex">\n' +
                                '            <span class="char-img" style="background-image: url('+to_avatar+')"></span>\n' +
                                '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+msg.content+'</span>\n' +
                                '        </div>')
                        } else {
                            $('.chat-content').append('<div class="chat-text section-left flex">\n' +
                                '            <span class="char-img" style="background-image: url('+to_avatar+')"></span>\n' +
                                '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src='+msg.content+'></span>\n' +
                                '        </div>')
                        }
                    }
                }
                $(".chat-content").scrollTop(3000);
            },'json'
        )
    }

    $(".image_up").click(function (){
        $("#file").click();
    })

    // 发送图片
    $("#file").change(function (){
        formdata = new FormData();
        formdata.append('fromid', fromid);
        formdata.append('toid', toid);
        formdata.append('online', online);
        formdata.append('file', $("#file")[0].files[0])
        $.ajax({
            url:API_URL+"uploading",
            type:'POST',
            cache:false,
            data:formdata,
            dataType:'json',
            processData:false,
            contentType:false,
            success:function (data,status,xhr){
                console.log(data);
                if (data.status=='ok'){
                    $('.chat-content').append('<div class="chat-text section-right flex">\n' +
                        '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src='+data.img_name+'></span>\n' +
                        '            <span class="char-img" style="background-image: url('+from_avatar+')"></span>\n' +
                        '           </div>')
                    $(".chat-content").scrollTop(3000);

                    var message = {
                        'data':data.img_name,
                        'fromid':fromid,
                        'toid':toid,
                        'type':'say_img'
                    }

                    ws.send(JSON.stringify(message));
                }else {
                    console.log(data.status)
                }
            }
        })
    });
</script>

</body>
</html>
